<template>
  <el-dialog
    :model-value="dialogVisible"
    title="查看流程"
    width="600px"
    @close="handleDialogClose"
  >
    <div class="approval-flow-container">
      <el-descriptions :column="1" border class="custom-descriptions">
        <el-descriptions-item 
          v-for="(step, index) in approvalSteps" 
          :key="index"
          :label="`审批节点${index + 1}`"
        >
          <div class="approval-content">
            <div v-if="step.status === '待审批'" class="pending-approval">
              {{ step.user }}: <span class="pending-text">{{ step.status }}</span>
            </div>
            <div v-else class="approved-or-rejected">
              {{ step.user }}: {{ step.comment }} ({{ step.time }})
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleDialogClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="approvalTimeDot">
import { ref, watch } from 'vue'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  approvalSteps: {
    type: Array,
    default: () => [
      {
        user: '张三(zhangsan)',
        status: '已同意',
        comment: '同意',
        time: '2025-03-29 16:46:03'
      },
      {
        user: '李四(lisi)',
        status: '待审批',
        comment: '待审批',
        time: ''
      },
      {
        user: '王五(wangwu)',
        status: '待审批',
        comment: '待审批',
        time: ''
      }
    ]
  }
})

// 定义emits
const emit = defineEmits(['update:visible', 'close'])

// 内部状态
const dialogVisible = ref(false)

// 监听visible变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
})

// 处理对话框关闭
const handleDialogClose = () => {
  emit('update:visible', false)
  emit('close')
}
</script>

<style scoped>
.approval-flow-container {
  margin-top: 20px;
}

.custom-descriptions {
  width: 100%;
}

.custom-descriptions .el-descriptions__item {
  display: flex;
  border-bottom: 1px solid #EBEEF5;
}

.custom-descriptions .el-descriptions__label {
  width: 120px;
  font-weight: 500;
  color: #606266;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #F5F7FA;
}

.custom-descriptions .el-descriptions__content {
  flex: 1;
  color: #303133;
  display: flex;
  align-items: center;
  padding: 18px 10px 0 10px !important;
}

.custom-descriptions .el-descriptions__row:last-child .el-descriptions__item {
  border-bottom: none;
}

.el-descriptions__cell--label {
  background-color: #F5F7FA !important;
}

:deep(.custom-descriptions .el-descriptions__cell) {
  padding: 0px 11px !important;
  min-height: 60px;
}

.approval-content {
  padding: 5px 0;
}

.pending-approval .pending-text {
  color: #909399;
}

.approved-or-rejected {
  color: #303133;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>